<template>
  <div class="stepOne">
    <el-container>
      <el-aside width="200px"
        ><div class="asideFont"><i class="el-icon-collection-tag"></i><span>基本信息</span></div>
        <div class="asideFontTwo"><i class="el-icon-collection-tag"></i><span>库存规格</span></div></el-aside
      >
      <el-main>
        <div class="content">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品分类：">
              {{ ruleForm.cate }}<span style="color:skyblue;marginLeft:10px" @click="changeCate()"> <i class="el-icon-edit" style="fontSize:20px;"></i>编辑</span></el-form-item
            >
            <el-form-item label="商品名称：" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="副标题：" prop="caption">
              <el-input v-model="ruleForm.caption"></el-input>
            </el-form-item>
            <el-form-item label="商品品牌：" prop="brand_id">
              <el-select v-model="ruleForm.brand_id" placeholder="请选择品牌">
                <el-option v-for="item in branch" :key="item.brand_id" :label="item.brand_name" :value="item.brand_id"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运费模板：" prop="brand_name">
              <el-select v-model="ruleForm.brand_name" placeholder="请选择运费模板">
                <el-option v-for="item in branchYun" :key="item.brand_id" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="商品货号：" prop="freight_id">
              <el-input v-model="ruleForm.freight_id"></el-input>
              <p style="padding:0;margin:0;color:#ccc;">如果您不输入商品货号，系统将自动生产一个唯一的货号</p>
            </el-form-item>
            <el-form-item label="服务保证：" prop="sn">
              <el-checkbox v-model="checked">无忧退货</el-checkbox>
              <el-checkbox v-model="checked">快速退款</el-checkbox>
              <el-checkbox v-model="checked">免费包邮</el-checkbox>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn">
          <el-button @click="changeCate()">上一步，选择商品分类</el-button>
          <el-button type="primary" @click="postInfo()">下一步，填写商品分类</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        cate: '',
        name: '',
        caption: '',
        brand_id: '',
        brand_name: '',
        freight_id: '',
        sn: ''
      },
      branch: [],
      branchYun: [],
      checked: true
    }
  },
  methods: {
    changeCate() {
      this.$router.push('/goods/add/step1')
    },
    async getBranch() {
      const res = await this.$http.post('/brand/data')
      console.log(res.data.data)
      this.branch = res.data.data
    },
    async getYunFei() {
      const res = await this.$http.post('/freightTemplate/findAllfreightTemplate')
      console.log(res.data.data.rows)
      this.branchYun = res.data.data.rows
    },
    async postInfo() {
      const { data: res } = await this.$http.post('/category/selectOneCategory', {
        params: this.ruleForm
      })
      console.log(res.message)
      this.$message(res.message)
      this.$router.push('/goods/add/step3')
    }
  },
  created() {
    if (localStorage.getItem('cate')) {
      const cate = localStorage.getItem('cate')
      this.ruleForm.cate = cate
    }
    this.getBranch()
    this.getYunFei()
  }
}
</script>
<style lang="less" scoped>
.stepOne .el-container {
  border: 1px solid #ccc;
  height: 600px;
  width: 85%;
  margin-left: 100px;
  margin-top: 35px;
  .el-aside {
    border-right: 1px solid #ccc;
    overflow: none;
    position: relative;
    .asideFont {
      background: #666666;
      color: #fff;
      font-size: 25px;
      position: absolute;
      width: 100%;
      text-align: center;
      height: 55px;
      line-height: 55px;
      top: 45px;
    }
    .asideFontTwo {
      background: #666666;
      color: #fff;
      font-size: 25px;
      position: absolute;
      width: 100%;
      text-align: center;
      height: 55px;
      line-height: 55px;
      top: 300px;
    }
  }
  .el-main {
    position: relative;
    .btn {
      position: absolute;
      right: 55px;
      bottom: 35px;
    }
    .content {
      margin: 45px auto 0px;
      width: 500px;
    }
  }
}
</style>
